<template>
  <div>
      <div v-if="type==1" class="good">
        <div @click="gogoodpage(goodsinfo.id)" class="img" >
          <img :src="goodsinfo.thumbnail">
        </div>
        <div class="info">
          <div class="name">{{goodsinfo.title}}</div>
          <div class="sub">
            {{goodsinfo.info}}
          </div>
          <div class="prize"><span class="red">¥{{goodsinfo.type[0].prize}}</span> <span>{{goodsinfo.type[0].unit}}</span></div>
          <div class="ctrl">
            <div class="add plus" @click="addgood1(0)">
              +
            </div>
            <!--{{goodsinfo.type[0].count}}-->
            <input v-show="goodsinfo.type[0].count>0" maxlength="2" v-model="goodsinfo.type[0].count" class="number"/>
            <div v-show="goodsinfo.type[0].count>0" class="add reduce"  @click="reducegood1(0)">
              -
            </div>
          </div>
        </div>
      </div>
      <div  v-if="type>1" class="good2">
        <div  @click="gogoodpage(goodsinfo.id)" class="img" >
          <img :src="goodsinfo.thumbnail">
        </div>
        <div class="info">
          <div class="name">{{goodsinfo.title}}</div>
          <div class="sub">
            选择规格
          </div>
        </div>
        <div style="height: 10px;clear: both"></div>
        <div class="guige" v-for="(good, index) in goodsinfo.type">
          <div class=""><span class="red">¥{{good.prize}}</span> <span>{{good.unit}}</span></div>
          <div class="ctrl">
            <div @click="addgood1(index)" class="add plus">
              +
            </div>
            <input v-show="good.count>0" maxlength="2" v-model="good.count" class="number"/>
            <div v-show="good.count>0" @click="reducegood1(index)" class="add reduce" >
              -
            </div>
          </div>
        </div>
      </div>
    </div>

</template>

<script>
  import store from '../../vuex/store'
  import { Toast } from 'vant';
  export default {
    name: "goods",
    props: {
      goodsinfo: Object,
      type:Number
    },
    methods: {
      gogoodpage:function(v){
        // category/uid?=456
        this.$router.push({path: '/category/uid?='+v})
      },
      addgood1: function (v) {
        if(this.goodsinfo.type[v].count<this.goodsinfo.type[v].stock){
          var good={
            id:this.goodsinfo.id,
            img:this.goodsinfo.thumbnail,
            name:this.goodsinfo.title,
            uid:this.goodsinfo.type[v].typeid,
            prize:this.goodsinfo.type[v].prize,
            unit:this.goodsinfo.type[v].unit,
            count:1,
            sub:this.goodsinfo.type[v].info,
            stock:this.goodsinfo.type[v].stock,
            select:true,
          }

          store.commit('addgoodtoCart',good)
          this.goodsinfo.type[v].count++
        }else {
          Toast('库存不足');
        }
      },



      reducegood1: function (v) {
        if( this.goodsinfo.type[v].count>0){
          var good={
            id:this.goodsinfo.id,
            img:this.goodsinfo.thumbnail,
            name:this.goodsinfo.title,
            uid:this.goodsinfo.type[v].typeid,
            prize:this.goodsinfo.type[v].prize,
            unit:this.goodsinfo.type[v].unit,
            count:1,
            sub:this.goodsinfo.type[v].info,
            stock:this.goodsinfo.type[v].stock,
            select:true,
          }

          store.commit('deletegood',good)
          this.goodsinfo.type[v].count--
        }

      },


    }
  }
</script>

<style scoped lang="less">
  @width: 20px;
  .good .ctrl {
    position: absolute;
    height: @width;
    width: @width*3;
    right: 10px;
    bottom: 5px;

  }

  .good2 .ctrl {
    position: absolute;
    height: @width;
    width: @width*3;
    right: 10px;
    bottom: 10px;

  }

  .guige {
    clear: both;
    position: relative;
    height: 40px;
    padding: 0 15px;
    border-top: 1px solid @_lgrey;
    line-height: 40px;
  }

  div {
    box-sizing: border-box;
  }

  .good {
    width: 100%;
    height: 100px;
    padding-top: 15px;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid @_lgrey;

  }

  .good2 {
    width: 100%;
    height: auto;
    padding-top: 15px;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid @_lgrey;

  }

  .name {
    font-size: 15px;
    color: @_blk;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .img {
    width: 30%;
    height: 70px;
    /*margin-top: 15px;*/
    padding: 5px;
    line-height: 70px;
    float: left; //'
    background-repeat: no-repeat;
    background-position: center;
    /*border: 1px solid #666666;*/
  }
  .img img{
    width: 100%;
  }
  .good-input {
    width: 30px;
    border: 1px solid @_blk;
    text-align: center;
  }

  .info {
    float: left;

    width: 68%;
    margin-left: 2%;
    position: relative;
    height: 75px;
  }

  .sub {
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .prize {
    margin-top: 15px;
  }

  .add {
    position: absolute;
    width: @width;
    height: @width;
    right: 0px;
    color: @_green;
    font-size: 20px;
    border-radius: 50%;
    border: 1px solid @_green;
    text-align: center;
  }

  .plus {
    line-height: @width;
    right: 0px;
  }

  .reduce {
    line-height: 15px;
    right: 40px;
  }

  .number {
    display: inline-block;
    position: absolute;
    /*border: 1px solid ;*/
    width: @width;
    height: @width;
    right: 20px;
    text-align: center;
  }
</style>
